<template>
  <div style="position: relative;">
    <User :user="comment.username"
          :time="comment.time" />
    <van-button round
                type="info"
                size="mini"
                v-if="sendId === $store.state.User.user._id||comment.username._id === $store.state.User.user._id"
                @click="deleteComment">删除</van-button>
    <div class="main">
      <span>{{ comment.main }}</span>
    </div>
    <div class="line"></div>
  </div>
</template>
<script>
import User from './User.vue'
import { deleteComment } from '@/api/forum'
export default {
  components: { User },
  props: {
    comment: {
      type: Object,
      default () {
        return {}
      }
    },
    sendId: {
      type: String
    },
    id: {
      type: String
    }
  },
  methods: {
    deleteComment () {
      this.$dialog.confirm({
        title: '提示',
        message: '是否删除该评论？'
      }).then(() => {
        deleteComment(this.id, this.comment._id).then(res => {
          this.$emit('deleteComment', res.data.comments)
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.van-button {
  position: absolute;
  right: 0;
  top: 0;
}
.main {
  margin-top: 10px;
}
.line {
  margin-top: 5px;
  background-color: #ededed;
  height: 1px;
  width: 200%;
  transform: scale(0.5);
  transform-origin: top left;
  margin: 10px 0;
}
</style>
